<template>
  <div class="userList-box">
    <div class="userList-main">
      <div class="table-top" style="display: inline-block;text-align: right">
        <!-- 操作按钮 -->
        <div>
          <el-button type="cancel" @click="batchDelete">删除</el-button>
          <el-button type="primary" @click="saveUserInfo(null,1)">新建讨论</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table :data="tableData" v-loading="loading" style="width: 100%" :index="indexMethod">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="index" type="index" label="序号" width="75">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="240">
          </el-table-column>
          <el-table-column prop="source" label="来源" width="240">
          </el-table-column>
          <el-table-column prop="text" label="内容" >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template slot-scope="scope">
              <div>
                <span style="color: #e63e3b;cursor: pointer" @click="deleteUser(scope.row.title)">删除</span>
                <span style="color: #e63e3b;cursor: pointer;margin-left: 15px" @click="saveUserInfo(scope.row,2)">编辑</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :title="userTitle" :visible.sync="userTitleVisible" width="50%" top="5%">
      <el-form class :model="userData" :rules="rules" label-position="right" :inline="true" ref="userData" label-width="78px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input :disabled="userOperationType === 2" v-model="userData.title" placeholder="请输入标题" style="width: 360px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源" prop="source">
              <el-input :disabled="userOperationType === 2" v-model="userData.source" placeholder="请输入来源" style="width: 360px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="内容" prop="text">
              <el-input v-model="userData.text" placeholder="请输入内容" type="textarea" :rows="4" style="width: 700px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="cancel" @click="cancelBtn()">取消</el-button>
        <el-button type="primary" v-if="userOperationType == 1" @click="addUser('userData')">保存</el-button>
        <el-button type="primary" v-if="userOperationType == 2" @click="updateUser('userData')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      tableData: [
        {
          id: 1,
          title: '中国共产党建党百年的背后是什么？',
          picUrl: 'http://101.35.150.167/forum/img/forum01.jpg',
          type: '浙百年',
          source: '央广网',
          text: '\u3000\u3000百年征程波澜壮阔，百年初心历久弥坚。“100”的背后是什么？是不忘初心，是惟有奋斗，是每一个你我接过时代的接力棒，奋勇向前。一百年恰是风华正茂，新征程仍需砥砺前行。',
          pic: {
            url: 'http://101.35.150.167/forum/img/forum01.jpg',
            num: 6
          },
          seenNum: 6675,
          likeNum: 236,
          comments: {
            total: 2,
            content: [
              {
                user: '机智勇敢',
                text: '说得好',
                time: '2020-12-21 22:59',
                likeNum: 2
              },
              {
                user: 'Xusji',
                text: '+6666',
                time: '2020-12-21 22:59',
                likeNum: 4
              }
            ]
          },
          userInfo: {
            star: true,
            like: true
          },
          related: [
            {
              id: 0,
              picUrl: 'http://101.35.150.167/forum/img/forum02.jpg',
              title: '建党百年为何发展迅速？'
            },
            {
              id: 1,
              picUrl: 'http://101.35.150.167/forum/img/forum03.jpg',
              title: '党百年为何保持青春活力？'
            },
            {
              id: 2,
              picUrl: 'http://101.35.150.167/forum/img/forum04.jpg',
              title: '建党的初衷？'
            }
          ]
        },
        {
          id: 2,
          title: '中国共产党建党百年发展为什么那么快？',
          type: '浙百年',
          source: '央广网',
          text: '\u3000\u3000中国共产党始终坚持独立自主的原则，坚定维护广大发展中国家的利益，坚持国家不分大小、强弱、贫富一律平等，坚决反对殖民主义、反对霸权主义、反对强权政治。',
          pic: {
            url: 'http://101.35.150.167/forum/img/forum02.jpg',
            num: 6
          },
          seenNum: 245,
          likeNum: 123,
          comments: {
            total: 2,
            content: [
              {
                user: '张三',
                text: '好',
                time: '2020-12-21 22:59',
                likeNum: 2
              },
              {
                user: 'Xusji',
                text: '+6666',
                time: '2020-12-21 22:59',
                likeNum: 4
              }
            ]
          },
          userInfo: {
            star: true,
            like: true
          },
          related: [
            {
              id: 0,
              picUrl: 'http://101.35.150.167/details/img/details01.jpg',
              url: './details?title=浙江模式的优秀',
              title: '浙江模式的优秀'
            },
            {
              id: 1,
              picUrl: 'http://101.35.150.167/details/img/details02.jpg',
              url: './details?title=如何模仿浙江模式',
              title: '如何模仿浙江模式'
            },
            {
              id: 2,
              picUrl: 'http://101.35.150.167/details/img/details03.jpg',
              url: './details?title=浙江模式的亮点在哪里',
              title: '浙江模式的亮点在哪里'
            }
          ]
        },
        {
          id: 3,
          title: '中国共产党走过百年历程为什么还保持青春活力？',
          type: '浙百年',
          source: '央广网',
          text: '\u3000\u3000一是始终走在时代潮流最前列二是始终站在攻坚克难最前沿三是始终维护人民根本利益四是始终加强党的自身建设',
          pic: {
            url: 'http://101.35.150.167/forum/img/forum03.jpg',
            num: 6
          },
          seenNum: 345,
          likeNum: 245,
          comments: {
            total: 2,
            content: [
              {
                user: '机智勇敢',
                text: '说得好',
                time: '2020-12-21 22:59',
                likeNum: 2
              },
              {
                user: 'Xusji',
                text: '+6666',
                time: '2020-12-21 22:59',
                likeNum: 4
              }
            ]
          },
          userInfo: {
            star: true,
            like: true
          },
          related: [
            {
              id: 0,
              picUrl: 'http://101.35.150.167/details/img/details01.jpg',
              url: './details?title=浙江模式的优秀',
              title: '浙江模式的优秀'
            },
            {
              id: 1,
              picUrl: 'http://101.35.150.167/details/img/details02.jpg',
              url: './details?title=如何模仿浙江模式',
              title: '如何模仿浙江模式'
            },
            {
              id: 2,
              picUrl: 'http://101.35.150.167/details/img/details03.jpg',
              url: './details?title=浙江模式的亮点在哪里',
              title: '浙江模式的亮点在哪里'
            }
          ]
        },
        {
          id: 4,
          title: '中国共产党建立的初衷？',
          type: '浙百年',
          source: '央广网',
          text: '\u3000\u3000中华崛起。振兴中华。富强中华。当年中国受列强侵略，百姓生活艰苦。初心就是想要让国家强大起来，不要让别人欺侮，要让百姓生活有着落，不要流落街头。',
          pic: {
            url: 'http://101.35.150.167/forum/img/forum04.jpg',
            num: 6
          },
          seenNum: 879,
          likeNum: 572,
          comments: {
            total: 2,
            content: [
              {
                user: '机智勇敢',
                text: '说得好',
                time: '2020-12-21 22:59',
                likeNum: 2
              },
              {
                user: 'Xusji',
                text: '+6666',
                time: '2020-12-21 22:59',
                likeNum: 4
              }
            ]
          },
          userInfo: {
            star: true,
            like: true
          },
          related: [
            {
              id: 0,
              picUrl: 'http://101.35.150.167/details/img/details01.jpg',
              url: './details?title=浙江模式的优秀',
              title: '浙江模式的优秀'
            },
            {
              id: 1,
              picUrl: 'http://101.35.150.167/details/img/details02.jpg',
              url: './details?title=如何模仿浙江模式',
              title: '如何模仿浙江模式'
            },
            {
              id: 2,
              picUrl: 'http://101.35.150.167/details/img/details03.jpg',
              url: './details?title=浙江模式的亮点在哪里',
              title: '浙江模式的亮点在哪里'
            }
          ]
        }
      ],

      loading: false,
      total: 0,
      userOperationType: 1,
      userTitle: '',
      userTitleVisible: false,
      userData: {},
      deleteIdList: [],
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        password2: [{ required: true, message: '请再次输入密码', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 新增或保存讨论
    saveUserInfo(userData, type) {
      this.userOperationType = type
      //新增
      if (type === 1) {
        this.userData = {}
        this.userTitle = '新增讨论'
      }
      // 保存
      else {
        this.userData = userData
        this.userTitle = '修改讨论信息'
      }
      this.userTitleVisible = true
    },
    //取消修改或新增讨论
    cancelBtn() {
      this.userTitleVisible = false
    },
    //更新讨论信息
    updateUser(formName) {},
    //新增讨论
    addUser(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.tableData.push(this.userData)
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.userTitleVisible = false
        }
      })
    },
    // 选中
    handleSelectionChange(selectList) {
      this.deleteIdList = []
      for (var i = 0; i < selectList.length; i++) {
        this.deleteIdList.push(selectList[i].id)
      }
    },
    // 批量删除
    batchDelete() {},
    /**
     * 自定义序号
     * @param index
     * @returns {*}
     */
    indexMethod(index) {
      return index
    },
    // 删除讨论
    deleteUser(title) {
      this.tableData.forEach((item, index) => {
        if (item.title == title) {
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      })
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.userList-box {
  width: 100%;
  height: 100%;
  .userList-main {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    flex-direction: column;
    .table-top {
      width: 100%;
      height: 70px;
      display: flex;
      justify-content: space-between;
      background: rgba(255, 255, 255, 1);
      align-items: center;
      box-sizing: border-box;
      padding: 12px;
      border-bottom: 1px solid #edeef0;
    }
    .page-box {
      background: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      padding: 12px;
      text-align: right;
    }
    .table-box {
      flex: 1;
      background: rgba(255, 255, 255, 1);
    }
  }
}
.form-input-width {
  width: 360px;
}
</style>